<!-- 即将过期 -->
<template>
	<view class="ExpiringSoon">
		<view class="soon font-weight-400 color6 size-28 dis" v-if="list.length && !loading">
			便利豆过期后系统将自动收回，请尽快使用
		</view>
		<mescroll-body @init="mescrollInit" @down="$event=>$event.resetUpScroll(false)"
			@up="$event=> postGetBeansExpire($event.num)" :toTop="{width: '100px',height: '100px'}"
			:down="{auto: false}" :up="{auto: false, textNoMore: '-已经到底啦-',empty:{use:false}}">
			<view class="beans-for f-background radius12 margin-bottom-16 dis-cen" v-for="(item,index) in list" :key="index">
				<view class="font-weight-600 color3 size-60">{{item.beansAmount}}</view>
				<view class="beans-title">
					<view class="hour font-weight-600 size-36" :class="item.isPrompt ? 'color' : 'color3'">{{item.desc}}</view>
					<view class="font-weight-400 color-8 size-26">{{item.time}}</view>
				</view>
				<!-- <view class="font-weight-400 color9 size-28 margin-bottom-16">订单号：2024071312334518965</view> -->
			</view>
			<view v-if="!list.length && !loading">
				<Default tisName="暂无过期便利豆数据！" />
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { GetBeansExpire } from "@/api/index"
	import Default from "@/components/default/default"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: { Default },
		data() {
			return {
				loading: true,
				list: [],
				params: {
					size: 10, // 	每页显示条数
					current: 1, // 当前页
				}
			}
		},
		onShow() {
			this.postGetBeansExpire()
		},
		methods: {
			// 列表数据
			async postGetBeansExpire(page) {
				this.params.current = this.mescroll.num
				const { code, data } = await GetBeansExpire(this.params)
				const _this = this
				if (code == "200") {
					this.list = this.mescroll.num == 1 ? data.records : this.list.concat(data.records); //追加新数据
					setTimeout(() => {
						_this.loading = false
						_this.mescroll.endByPage(data.records.length, data.total); //必传参数(当前页的数据个数, 总页数)
					}, 500)
				}
			},
		}
	}
</script>

<style lang="scss">
	.ExpiringSoon {
		padding: 0 16rpx;
		.soon {
			height: 82rpx;
		}
		.beans-title{
			text-align: right;
			.hour{
				margin-bottom: 8rpx;
			}
		}
		.beans-for{
			padding: 36rpx 24rpx 30rpx 28rpx;
		}
	}
</style>